App.module('layoutModule', function(layoutModule){
	var _modulename = this.moduleName;
	this.startWithParent = false;
	var _layout = null;
   var MainView = Marionette.ItemView.extend({
		tagName: 'div'
   });
	var Controller = Marionette.Controller.extend({
		initialize: function(options){
			if (App.debug) console.log(this.moduleName + ' Controller initialized');
			this.options = options;
			$(window).bind("resize.app", _.bind(this.resize, this));
		},
		resize: function() {
			console.log('resize');
			App.vent.trigger("layout:resized");
			
		},
		show: function() {
			if (App.debug) console.log(this.moduleName + ' Controller show invoked');
         console.log(this.options);
			var main_view = new MainView({
				id: this.options.id,
				template: '#' + this.options.template
			});
			this.options.region.show(main_view);
		},
		render: function() {
			var self = this;
			if (App.debug) console.log(this.moduleName + ' Controller render invoked');
         console.log(this.options);
			_layout = $('#' + this.options.id).layout(this.options.layout);
         console.log(_layout)
			_layout.east.options.onclose_end   			= function(pane) { self.close_end(pane); }
			$("#center-container").wijsuperpanel({
				hScroller: {
               scrollMode: 'edge'
            },
				vScroller: {
               scrollMode: 'edge'
            },
				allowResize: true,
				autoRefresh: true
			});
		},
		close_end: function(pane) {
			App.vent.trigger(_modulename + ":resized");
		},
		close_start: function(pane) {
			//App.MainApp.vent.trigger("layout:resized");
		},
		open_end: function(pane) {
			App.vent.trigger(_modulename + ":resized");
		},
		open_start: function(pane) {
			//App.MainApp.vent.trigger("layout:resized");
		},
		resize_end: function(pane) {
			App.vent.trigger(_modulename + ":resized");
		},
		resize_start: function(pane) {
			//App.MainApp.vent.trigger("layout:resized");
		}
	});
	layoutModule.addInitializer(function (options) {
		var defaults = {
         id:                         'app-layout',
         template:                   'app-layout-template',
			layout: {
            east: {
               size: 20,
               minSize: 20,
               maxSize: 20
            },
            west: {
               size: 20,
               minSize: 20,
               maxSize: 20
            },
            north: {
               size:    140,
               minSize: 140,
               maxSize: 140
            },
            south: {
               size: 20,
               minSize: 20,
               maxSize: 20
            }  
			}
		};
      options = _.extend(defaults, options);
		if (App.debug) console.log('App.layoutModule addInitializer');
		layoutModule.Controller = new Controller(options);
		layoutModule.Controller.show();
		layoutModule.Controller.render();
   });
});

App.layoutModule.on("before:start", function(){
	if (App.debug) console.log(this.moduleName + ' before:start');
});

App.layoutModule.on("start", function(){
	if (App.debug) console.log(this.moduleName + ' start');
});

